﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>合同管理</title>
    <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../assets/module/admin.css?v=317"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">合同类型:</label>
                        <div class="layui-input-inline">
                            <select name="contractType">
                                <option value="">全部</option>
                                <option value="L">劳动合同</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">签署方:</label>
                        <div class="layui-input-inline">
                            <input name="supplierName" placeholder="签署方" class="layui-input" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">创建日期:</label>
                        <div class="layui-input-inline">
                            <input name="timeRange" placeholder="创建时间" class="layui-input" autocomplete="off"
                                   id="datePicker"/>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="searchBtn" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="tableField" lay-filter="tableField"></table>
        </div>
    </div>
</div>
<!-- 表单弹窗 -->
<script type="text/html" id="contractDialog">
    <form id="contractForm" lay-filter="contractForm" class="layui-form model-form"
          style="padding-right: 20px;">
        <div class="layui-row">
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">签署方</label>
                <div class="layui-input-block">
                    <input name="supplierId" class="layui-input" id="cascader2">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">上传合同</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal" id="upload"><i
                            class="layui-icon">&#xe67c;</i>选择合同
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">合同类型</label>
                <div class="layui-input-block">
                    <input name="contractType" class="layui-input" id="cascader3">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">合同有效期</label>
                <div class="layui-input-block">
                    <input name="expireTime" class="layui-input" id="contractExpireTime" autocomplete="off">
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <a class="layui-btn" id="action" lay-submit>保存</a>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<script type="text/html" id="createDialog">
    <form id="createForm" lay-filter="createForm" class="layui-form model-form"
          style="padding-right: 20px;">
        <input hidden name="supId">
        <div class="layui-row">
            <div class="layui-form-item"><label class="layui-form-label layui-form-required">合同标题</label>
                <div class="layui-input-block">
                    <input name="title" class="layui-input" placeholder="合同编号或表土">
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label layui-form-required">合同有效期</label>
                <div class="layui-input-block">
                    <input name="expireTime" class="layui-input" id="expireTimeSave" autocomplete="off">
                </div>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="createBtnSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<script type="text/html" id="sendDialog">
    <form id="sendForm" lay-filter="sendForm" class="layui-form model-form"
          style="padding-right: 20px;">
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">签署者账号</label>
                    <div class="layui-input-block">
                        <input name="signer" class="layui-input" id="cascader" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">签署过期时间</label>
                    <div class="layui-input-block">
                        <input name="expireTime" autocomplete="off" class="layui-input" id="expireTime"
                               lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">签名位置页码</label>
                    <div class="layui-input-block">
                        <select name="pageNum">
                            <option value="2">尾页</option>
                            <option value="1">首页</option>
                            <option value="3">首尾页</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">清晰度</label>
                    <div class="layui-input-block">
                        <select name="dpi" lay-verify="required">
                            <option value="160" selected="selected">高清</option>
                            <option value="240">超高清</option>
                            <option value="96">低清</option>
                            <option value="120">普清</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">x轴距</label>
                    <div class="layui-input-block">
                        <input name="x" autocomplete="off" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">强制阅读时间(秒)</label>
                    <div class="layui-input-block">
                        <input name="forceReadingSeconds" autocomplete="off" value="30" maxlength="2"
                               class="layui-input" oninput="value=value.replace(/[^\d]/g,'')">
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">选择签章</label>
                    <div class="layui-input-block">
                        <select name="signatureImageName" id="signatureImageName">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否允许拖动签名位置</label>
                    <div class="layui-input-block">
                        <select name="isAllowChangeSignaturePosition">
                            <option value="1">允许</option>
                            <option value="0">不允许</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否需要手绘签名</label>
                    <div class="layui-input-block">
                        <select name="isDrawSignatureImage">
                            <option value="1">允许</option>
                            <option value="0">禁止</option>
                            <option value="2">只能手绘</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">签章缩放比例</label>
                    <div class="layui-input-block">
                        <select name="signatureImageRate">
                            <option value="70">70%</option>
                            <option value="100">100%</option>
                            <option value="90">90%</option>
                            <option value="80">80%</option>
                            <option value="60">60%</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">y轴距</label>
                    <div class="layui-input-block">
                        <input name="y" autocomplete="off" class="layui-input" lay-verify="required">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="sendBtnSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<script type="text/html" id="previewDialog">
    <form id="previewForm" lay-filter="previewForm" class="layui-form model-form"
          style="padding-right: 20px;">
        <div class="layui-row">
            <div class="layui-form-item"><label class="layui-form-label layui-form-required">预览账号</label>
                <div class="layui-input-block">
                    <input name="account" class="layui-input" id="cascader1" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label layui-form-required">预览失效时间</label>
                <div class="layui-input-block">
                    <input name="expireTime" autocomplete="off" class="layui-input" id="expireTime1"
                           lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label layui-form-required">清晰度</label>
                <div class="layui-input-block">
                    <select name="dpi" lay-verify="required">
                        <option value="160">高清</option>
                        <option value="240">超高清</option>
                        <option value="96">低清</option>
                        <option value="120">普清</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="preBtnSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="contractTbBar">
    <a class="layui-btn layui-btn-xs" lay-event="lock">锁定合同</a>

    <a class="layui-btn layui-btn-xs" data-dropdown="#userTbDrop{{d.LAY_INDEX}}" no-shade="true">
        更多操作<i class="layui-icon layui-icon-drop" style="font-size: 12px;margin-right: 0;"></i></a>
    <!-- 下拉菜单 -->
    <ul class="dropdown-menu-nav dropdown-bottom-right layui-hide" id="userTbDrop{{d.LAY_INDEX}}">
        <div class="dropdown-anchor"></div>
        <li><a lay-event="send">发送合同</a></li>
        <li><a lay-event="status">查看状态</a></li>
        <li><a lay-event="downloadContract">下载合同</a></li>
        <li><a lay-event="cancel">撤销合同</a></li>
    </ul>
</script>
<!-- js部分 -->
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=317"></script>
<script type="text/javascript" src="../../../assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="../../../assets/js/sqjx.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'upload', 'dropdown', 'laydate', 'cascader'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var cascader = layui.cascader;
        laydate.render({
            elem: '#datePicker', //指定元素
            type: 'date',
            range: true,
            trigger: 'click'
        });
        /* 渲染表格 */
        var insTb = table.render({
            elem: '#tableField',
            url: '/contract/contract/queryContractFileList',
            page: true,
            toolbar: ['<p>',
                '<button lay-event="uploadContract" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>上传合同</button>&nbsp;',
                '</p>'].join(''),
            method: 'post',
            request: {
                pageName: 'page',
                limitName: 'rows',
            },
            cellMinWidth: 80,
            cols: [[
                {type: 'numbers'},
                {field: 'fileName', title: '合同名称', width: 150},
                {field: 'supplierName', title: '签署方', width: 200},
                {field: 'title', title: '合同编号',},
                {
                    field: 'status', title: '合同状态', width: 100, templet(row) {

                        switch (row.status) {
                            case 1:
                                return '待生成';
                            case 2:
                                return '待发送';
                            case 3:
                                return '待完成';
                            case 4:
                                return '已锁定';
                            case 5:
                                return '已撤销';
                                case6
                        }
                    }
                },
                {field: 'createTime', title: '创建时间',},
                {field: 'contractExp', title: '过期时间',},
                {title: '操作', toolbar: '#contractTbBar', width: 200, align: 'center', fixed: 'right'}
            ]],
            parseData: function (res) {
                res = res.obj;
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.total,
                    "data": res.rows
                }
            }
        });

        var supplierList = doPostSync('/contract/supplier/queryAllSupplier').obj;
        /* 表格搜索 */
        form.on('submit(searchBtn)', function (data) {
            var param = data.field;
            var timeRange = param.timeRange;
            if (timeRange) {
                param.startTime = timeRange.split(" - ")[0] + " 00:00:00"
                param.endTime = timeRange.split(" - ")[1] + " 23:59:59";
            }
            insTb.reload({where: param, page: {curr: 1}});
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(tableField)', function (obj) {
            var data = obj.data;
            if (obj.event === 'downloadFile') { // 下载文件
                handleDownloadDoc(data)
            } else if (obj.event === 'send') {//发送合同
                handleSend(data);
            } else if (obj.event === 'cancel') { // 撤销合同
                handleCancel(data);
            } else if (obj.event === 'lock') { // 锁定合同
                handleLock(data)
            } else if (obj.event === 'view') { // 查看合同参数
                handleViewConfig(data)
            } else if (obj.event === 'preview') { // 在线查看合同
                handlePreview(data)
            } else if (obj.event === 'downloadContract') { // 下载合同
                handleDownload(data)
            } else if (obj.event === 'status') {
                handleStatus(data);
            }
        });
        /* 表格头工具栏点击事件 */
        table.on('toolbar(tableField)', function (obj) {
            if (obj.event === 'uploadContract') { // 打开上传文件窗口
                handleCreateContract(obj.data);
            }
        });

        function handlePreview(row) {
            if (!row.contractId) {
                showAlert('您还没有生成合同');
                return false;
            }
            admin.open({
                type: 1,
                content: $('#previewDialog').html(),
                offset: 't',
                area: ['60%', '80%'],
                success: function (layero, dIndex) {
                    form.render();
                    laydate.render({
                        elem: '#expireTime1',
                        type: 'datetime',
                        value: getDateTimeStr(7),
                        max: getDateTimeStr(7),
                        trigger: 'click'
                    });
                    $.post('/contract/contract/selectSendUserList', {contractId: row.contractId}, function (res) {
                        cascader.render({
                            elem: '#cascader1',
                            data: res.obj
                        });
                    });
                    form.on('submit(preBtnSubmit)', function (obj) {
                        var param = obj.field;
                        param.contractId = row.contractId;
                        layer.confirm('是否向该用户发送预览链接', function () {
                            $.post('/contract/contract/preViewContract', param, function (res) {
                                closeDialog()
                                if (res.code == 200) {
                                    showAlert(res.msg, 1);
                                } else {
                                    showAlert(res.msg);
                                }
                            });
                        });
                        return false;
                    })

                }
            });
        }

        function handleDownloadDoc(data) {
            admin.confirm('确认下载文件？', function () {
                var url = '/contract/contract/downloadDoc?fid=' + data.fileId + '&token=' + Cookies.get('token');
                window.open(BASE_URL + url);
            })
        }

        function handleSend(field) {
            var flag = true;
            $.post('/contract/contract/getSignerStatus', {contractId: field.contractId}, function (res) {
                let keys = Object.keys(res.obj);
                if (keys.length === 0) {
                    //合同未发送可以发送
                } else {
                    Object.keys(res.obj).forEach(item => {
                        if (res.obj[item] == 1) {
                            flag = false
                        }
                    })
                };
                if (flag) {
                    admin.open({
                        type: 1,
                        content: $('#sendDialog').html(),
                        area: ['80%', '100%'],
                        offset: 't',
                        success: function (layero, dIndex) {
                            laydate.render({
                                elem: '#expireTime',
                                type: 'datetime',
                                max: 7,
                                value: getDateTimeStr('', '', 3)//签署过期时间
                            });
                            $.post('/contract/contract/selectSendUserList', {contractId: field.contractId}, function (res) {
                                cascader.render({
                                    elem: '#cascader',
                                    data: res.obj,
                                    onChange: function (each) {
                                        $.post('/contract/accountSign/selectUserSignList', {account: each[0]}, function (res) {
                                            if (res.code == 200) {
                                                var option = "";
                                                res.obj.rows.forEach(item => {
                                                    option += `<option value="${item.signName == 'system' ? '' : item.signName}">${item.signName}</option>`
                                                });
                                                $("#signatureImageName").html(option);
                                                form.render('select');
                                            }
                                        });
                                        $.post('/contract/contract/getUser', {account: each[0]}, function (res) {
                                            if (res.obj.userType == 2) {
                                                $("[name='x']").val(0.2);
                                                $("[name='y']").val(0.8);
                                                $("[name='signatureImageRate']").val(80)
                                            } else if (res.obj.userType == 1) {
                                                $("[name='x']").val(0.2);
                                                $("[name='y']").val(0.89);
                                                $("[name='signatureImageRate']").val(60)
                                            }
                                        })
                                    }
                                });
                            });
                            form.render();
                            form.on('submit(sendBtnSubmit)', function (obj) {
                                var param = obj.field;
                                var signaturePositions = [];
                                param.contractId = field.contractId;
                                if (obj.field.pageNum == 3) {
                                    if (parseInt(field.page) < 3) {
                                        showAlert('合同小于三页，请选择首页或尾页进行签名');
                                        return false;
                                    }
                                }
                                param.signType = obj.field.pageNum
                                param.signaturePositions = signaturePositions;
                                doPostAsync('/contract/contract/contractSend', param, function (res) {
                                    if (res.code == 200) {
                                        insTb.reload({page: {curr: 1}});
                                        closeDialog();
                                        showAlert(res.msg, 1);
                                    } else {
                                        showAlert(res.msg);
                                    }
                                });
                                return false;
                            })

                        }
                    });
                } else {
                    showAlert('请等待合同签署完成后再发送！', 5)
                }
            })
        }

        function handleStatus(data) {
            var param = {contractId: data.contractId};
            var url = '/contract/contract/getSignerStatus';
            $.post(url, param, function (res) {
                if (res.code == 200) {
                    closeDialog();
                    if (JSON.stringify(data) != "{}") {
                        var text = "";
                        let keys = Object.keys(res.obj);
                        if (keys.length) {
                            Object.keys(res.obj).forEach(item => {
                                if (res.obj[item] == 1) {
                                    text += "，" + item
                                }
                            });
                            if (text) {
                                text = text.substring(1);
                                showAlert(text + "&nbsp;&nbsp;&nbsp;未签署", 5);
                            } else {
                                showAlert("合同签署已完成", 6);
                            }
                        } else {
                            showAlert('合同未发送', 5)
                        }
                    } else {
                        showAlert('合同未发送', 5)
                    }
                } else {
                    showAlert(res.msg);
                }
            });
        }

        function handleCancel(data) {
            if (!data.contractId) {
                showAlert('您还未生成合同！！！');
                return false;
            }
            admin.confirm('确定要撤销合同吗？', function () {
                var param = {contractId: data.contractId};
                var url = '/contract/contract/contractCancel';
                $.post(url, param, function (res) {
                    insTb.reload({page: {curr: 1}});
                    if (res.code == 200) {
                        showAlert(res.msg, 1);
                        closeDialog()
                    } else {
                        showAlert(res.msg)
                    }
                });
            })
        }

        function handleLock(data) {
            admin.confirm('锁定合同后将无法操作，确定锁定合同？', function () {
                var param = {contractId: data.contractId};
                var url = '/contract/contract/contractLock';
                $.post(url, param, function (res) {
                    if (res.code == 200) {
                        insTb.reload({page: {curr: 1}});
                        closeDialog()
                        showAlert(res.msg, 1);
                    } else {
                        showAlert(res.msg);
                    }
                });
            })

        }

        function handleViewConfig(data) {
            var param = {contractId: data.contractId};
            var url = '/contract/contract/getSignerConfig';
            $.post(url, param, function (res) {
                if (res.code == 200) {
                    closeDialog();
                    showAlert(res.msg, 1);
                } else {
                    showAlert(res.msg)
                }
            });
        }

        function handleDownload(data) {
            if (!data.contractId) {
                showAlert('您还没有生成合同');
                return false;
            }
            if (data.status == 5) {
                showAlert('撤销的合同无法被下载', 7);
                return false
            }
            admin.confirm('确认下载合同？', function () {
                var url = '/contract/contract/downloadContract?contractId=' + data.contractId + '&token=' + Cookies.get('token');
                window.open(BASE_URL + url);
            })

        }

        function handleCreateContract() {
            admin.open({
                type: 1,
                content: $('#contractDialog').html(),
                offset: 't',
                area: ['60%', '80%'],
                success: function (layero, dIndex) {
                    form.render();
                    laydate.render({
                        elem: '#contractExpireTime', //指定元素
                        type: 'datetime',
                        value: getDateTimeStr(1),
                        trigger: 'click'
                    });
                    cascader.render({
                        elem: '#cascader2',
                        filterable: true,
                        data: supplierList
                    });
                    $.post('/office/tDict/queryChildrenDictAsCascade', {pDictCode: 'htlx'}, function (res) {
                        cascader.render({
                            elem: '#cascader3',
                            filterable: true,
                            data: res.obj
                        });
                    });

                    var loadIns;
                    upload.render({
                        elem: '#upload'
                        ,
                        accept: 'file'
                        ,
                        url: '/contract/contract/contractUpload' //上传文件
                        ,
                        bindAction: '#action'
                        ,
                        auto: false
                        ,
                        before: function () {
                            loadIns = layer.load(2)
                            this.data = {
                                account: DEVELOP_ACCOUNT,
                                expireTime: $("[name='expireTime']").val(),
                                supplierId: $("[name='supplierId']").val(),
                                contractType: $("[name='contractType']").val(),
                                userName: getUserName(),
                                userCode: getAccount(),
                                supplierName: supplierList.filter(item => item.value == $("[name='supplierId']").val())[0].label
                            }
                        }
                        ,
                        done: function (res) {
                            closeDialog();
                            if (res.code == 200) {
                                insTb.reload({page: {curr: 1}});
                                showAlert('上传成功', 1);
                            } else {
                                //显示异常
                                showAlert(res.msg);
                            }
                            // layer.close(loadIns);
                        }
                    });
                }
            });
        }

    })
    ;
</script>
</body>
</html>
